import React, { Fragment } from 'react'
import ReactDOM from 'react-dom'

function ListItem({item}) {
  return (
    <>
      <dt>{ item.term }</dt>
      <dd>{ item.description }</dd>
    </>
  )
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => 
        <ListItem item={item} key={ item.id }/>
      )}
    </dl>
  )
}

const items = [
  { id: 1, term: 1, description: 'hello' },
  { id: 2, term: 2, description: 'nihao' }
]

ReactDOM.render(
  <Glossary items={ items }/>,
  document.getElementById('root')
)